<template>
  <div>
    <div class="row-head" style="height: auto;padding: 20px 0;">
      <el-form ref="form" :model="form" label-width="50px" :inline="$store.state.app.screenWidth<992?false:true">
        <el-form-item label=" " prop="loginName" v-if="!agentId||!agentSelect">
          <el-autocomplete class="inline-input" size="small" v-model="form.loginName"
                           :fetch-suggestions="querySearch" :trigger-on-focus="false" @select="handleSelect"
                           placeholder="请输入代理账号"></el-autocomplete>
        </el-form-item>

        <el-form-item label=" " prop="title">
          <el-input size="small" v-model="form.title" style="width: 350px;" clearable placeholder="请输入代理协议名称"></el-input>
        </el-form-item>
        <el-form-item label=" " prop="dictStatus">
          <el-select v-model="form.dictStatus" clearable placeholder="请选择审核状态">
            <el-option
              v-for="item in reviewStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="row-form-btn">
        <el-button class="sd-search-button" size="small" icon="el-icon-search" @click="current=1;initData()">查询</el-button>
        <el-button class="sd-search-button" size="small" icon="el-icon-refresh-right" @click="resetForm('form')">重置</el-button>
      </div>
    </div>
    <div class="split-line"></div>
    <div class="row-main">
      <el-button class="sd-search-button" icon="el-icon-back" size="small" @click="toBack">返回</el-button>
      <el-button class="sd-search-button" icon="el-icon-refresh" size="small" @click="current=1,initData()">刷新数据</el-button>
      <el-button type="shenda" @click="changeBtnSelect('ALL_DATA')" icon="el-icon-document" size="small" v-if="agreementId" :disabled="!agreementSelect">所有</el-button>
      <el-button type="shenda" @click="changeBtnSelect('ALL_DATA')" icon="el-icon-document" size="small" v-if="agentId" :disabled="!agentSelect">所有</el-button>
      <el-button type="shenda" @click="changeBtnSelect('AGREEMENT_DATA')"icon="el-icon-document" size="small" v-if="agreementId" :disabled="agreementSelect">查询《{{ agreementTitle }}》签署列表</el-button>
      <el-button type="shenda" @click="changeBtnSelect('DIRECTLY_DATA')" icon="el-icon-document" size="small" v-if="agentId" :disabled="agentSelect">直属</el-button>
      <el-table :header-cell-style="{ 'background':'#F2F6FC','color':'#606266' }"
                :data="tableData" class="row-main-table"
                ref="table" tooltip-effect="dark"
                v-loading.fullscreen="tableLoading" element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)"
      >
        <el-table-column type="index" label="序号" align="center" :width="$store.state.app.screenWidth<992?'830px':'auto'"
                         :fixed="$store.state.app.screenWidth<992?true:false"></el-table-column>
        <el-table-column prop="title" label="协议标题" align="center"
                         :width="$store.state.app.screenWidth<992?'150px':'auto'"></el-table-column>
        <el-table-column prop="loginName" label="代理账号" align="center"
                         :width="$store.state.app.screenWidth<992?'150px':'auto'"></el-table-column>
        <el-table-column prop="dictStatusName" label="签署状态" align="center"
                         :width="$store.state.app.screenWidth<992?'150px':'auto'"></el-table-column>
        <el-table-column prop="updateTime" label="签署时间" align="center"
                         :width="$store.state.app.screenWidth<992?'150px':'auto'"></el-table-column>
        <el-table-column prop="certificatesOne" label="签字图片" align="center"
                         :width="$store.state.app.screenWidth<992?'150px':'auto'">
          <template v-slot="{ row, rowIndex }">
            <div v-if="row.userSign !== null">
              <el-popover placement="bottom" label="" trigger="hover">
                <div style="width:600px">
                  <img :src="row.userSign" style="width:100%">
                </div>
                <img slot="reference" :src="row.userSign" style="width: 100%; height: 100%;"></el-popover>
            </div>
            <div v-else>
              暂未上传
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="certificatesOne" label="身份证照片" align="center"
                         :width="$store.state.app.screenWidth<992?'150px':'auto'">
          <template v-slot="{ row, rowIndex }">
            <div v-if="row.certificatesOne !== null">
              <el-popover placement="bottom" label="" trigger="hover">
                <div style="width:600px">
                  <img :src="row.certificatesOne" style="width:100%">
                </div>
                <img slot="reference" :src="row.certificatesOne" style="width: 100%; height: 100%;"></el-popover>
            </div>
            <div v-else>
              暂未上传
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注信息" align="center"
                         :width="$store.state.app.screenWidth<992?'150px':'auto'"></el-table-column>
        <el-table-column prop="" label="操作中心" align="center" :width="$store.state.app.screenWidth<992?'150px':'auto'">
          <template slot-scope="scope">
            <el-dropdown trigger="click">
              <div>
                <svg-icon class="el-dropdown-link" icon-class="operation"></svg-icon>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-if="scope.row.dictStatus=='C_WAIT'">
                  <el-button class="operation" type="text" @click="doSomeAct(scope.row)" v-preventReClick>审 核
                  </el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div :style="{'overflow':$store.state.app.screenWidth<992?'scroll':'auto'}">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="row-main-pager"
          :current-page.sync="current"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          background></el-pagination>
      </div>
    </div>
    <el-dialog
      title="签字审核"
      :visible.sync="showUserReviewDialog"
      width="50%"
      center>
      <div>
        <el-form :model="userForm" ref="userForm" :rules="userFormRules" label-width="150px">
          <el-form-item prop="dictAuditStatus" label="是否通过">
            <el-radio-group v-model="userForm.dictStatus">
              <el-radio-button label="C_THROUGH">通过</el-radio-button>
              <el-radio-button label="C_REFUSE">不通过</el-radio-button>
            </el-radio-group>
          </el-form-item>

          <el-form-item prop="remark" label="不通过原因"  v-if="userForm.dictStatus=='C_REFUSE'" >
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="userForm.remark"
              maxlength="255"
              :rows="7"
              style="width: 500px"
              show-word-limit
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button type="shenda" @click="showUserReviewDialog = false">关  闭</el-button>
          <el-button type="primary" @click="refuseReason('userForm')" v-preventReClick>提  交</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
  import {selectUserAgreementExamine, updateAgreementStatus, getLoginName} from "@/api/getData";

  export default {
    name: 'agentSignAgreementRecords',
    data() {
      return {
        userFormRules: {
          remark: [
            {required: true, message: '请填写不通过原因', trigger: 'blur'}
          ]
        },
        userForm: {
          id: '',
          remark: '',
          dictStatus:''
        },
        agreementId: '',
        agentId: '',
        agentLoginName: '',
        agreementTitle: '',
        agreementSignStatus: '',
        agreementReviewStatus: '',
        tableData: [],
        tableLoading: false,
        current: 1,
        pageSize: 10,
        total: 0,
        form: {
          userId: '',
          loginName: '',
          agreementId: '',
          title: '',
          dictStatus: ''

        },
        signStatusOptions: [//签署情况下拉
          {value: '', label: '请选择'},
          {value: '', label: '已签署'},
          {value: '', label: '未签署'},
        ],
        reviewStatusOptions: [//审核情况下拉
          {value: '', label: '请选择审核状态'},
          {value: 'C_WAIT', label: '待审核'},
          {value: 'C_REFUSE', label: '拒绝'},
          {value: 'C_THROUGH', label: '通过'},
        ],
        pagekey: '',
        showUserReviewDialog: false,
        agreementSelect: false,
        agentSelect: false,
      }
    },
    mounted() {
      this.agreementId = this.$route.query.agreementId ? this.$route.query.agreementId : '';
      this.agreementTitle = this.$route.query.agreementTitle ? this.$route.query.agreementTitle : '';
      this.agentId = this.$route.query.agentId ? this.$route.query.agentId : '';
      this.agreementSelect = this.agreementId?true:false;
      this.agentSelect = this.agentId?true:false;
      this.initData()
    },
    methods: {
      //切换数据筛选按钮 全部 or 直属
      async changeBtnSelect(buttonType) {
        if (buttonType == 'ALL_DATA') {
          if(this.agentId){
            this.agentSelect = false;
          }
          else if(this.agreementId){
            this.agreementSelect = false;
          }
        }else if(buttonType == 'AGREEMENT_DATA'){
          this.agreementSelect = true;
        }else if(buttonType == 'DIRECTLY_DATA'){
          this.agentSelect = true;
        }
        this.initData()
      },
      async doSomeAct(row) {
        this.pagekey = await this.$getPageKey()
        this.showUserReviewDialog = true
        this.userForm.id = row.id
        this.userForm.dictStatus = 'C_REFUSE';
        this.userForm.remark = row.remark?row.remark:'签署的姓名和身份证不符';
      },
      async refuseReason() {
        if(this.userForm.dictStatus=='C_THROUGH'){this.userForm.remark = ''}
        let res = await updateAgreementStatus(this.userForm, {pagekey: this.pagekey})
        this.showUserReviewDialog = false;
        if(res._result&&res.code==10000){
          this.$message.success("操作成功！")
        }
        this.initData()
      },
      async initData() {
        this.tableLoading = true;
        let agentId = this.agentSelect?this.agentId:'';
        let agreementId = this.agreementSelect?this.agreementId:'';
        let returnData = await selectUserAgreementExamine({
          userId: agentId,
          agreementId: agreementId,
          title: this.form.title,
          dictStatus: this.form.dictStatus,
          loginName: agentId?'':this.form.loginName,
          page: {
            current: this.current,
            size: this.pageSize
          }
        })
        this.tableLoading = false;
        this.tableData = [];
        this.total = 0;
        if (returnData._result) {
          if (returnData.data.records) {
            for (let item of returnData.data.records) {
              this.tableData.push(item);
            }
            this.total = returnData.data.total;
          }
        }
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.current = 1;
        this.initData();
      },
      handleCurrentChange(val) {
        this.current = val;
        this.initData();
      },
      handleSelect(e) {
        // console.log(e)
      },
      searchForm() {
        this.current = 1;
        this.initData();
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      toBack() {
        this.$router.back(-1)
      },
      async querySearch(queryString, cb) {
        let a = await getLoginName({
          loginname: queryString
        })
        if (a._result) {
          this.loginNames = [];
          for (let i = 0; i < a.data.length; i++) {
            this.loginNames.push({'value': a.data[i]})
          }
        }

        var loginNames = this.loginNames;
        //var results = queryString ? loginNames.filter(this.createFilter(queryString)) : loginNames;
        // 调用 callback 返回建议列表的数据
        cb(loginNames);
      },
    }
  }
</script>
<style>

</style>
